{% extends 'wxchat/wxbase.html' %}{% load static %}

{% block extra %}
    <link rel="stylesheet" href="{% static 'wxchat/style/style_food.css' %}?ver=20180921">
{% endblock extra %}
{% block container %}
<div class="weui-panel cardBg" >
    <div style="position: absolute;top:4px;right:4px;"><a href="{% url 'dog-index' %}?next={{ request.get_full_path }}"><i class="icon iconfont icon-shouye2 pink r" ></i></a></div>
    <div class="weui-panel__bd" style="color: #3a1437;height:100%">
        <div class="card_middle" style="text-align: center;">
            <h1 class="card_middle">狗粮定制功能<br>正在建设中....</h1>
        </div>
        <form action="" method="post" enctype="multipart/form-data" id="form1" >{% csrf_token %}
        {% for order in orders %}
            <div id="sort_{{ order.sort }}"  class="card_middle hide {% if not forloop.first %} hide {% endif %}" >
                <div class="card_hd"  >{{ order.name }}</div>
                <div class="weui-cells weui-cells_checkbox card_bd">
                    {% for s in order.dogstatustype.all %}
                        <label class="weui-cell weui-check__label card_item" for="id_{{s.id}}" >
                            <div class="weui-cell__hd" style="width:25%;text-align: center;">
                                {% if order.is_checkbox == 1 %}
                                    <input type="checkbox" class="weui-check" name="radio_{{order.sort}}_{{ order.id }}" id="id_{{s.id}}" data-item="sort_{{ order.sort }}" value="{{ s.name }}">
                                {% else %}
                                    <input type="radio" class="weui-check" name="radio_{{order.sort}}_{{ order.id }}" id="id_{{s.id}}" data-item="sort_{{ order.sort }}" value="{{ s.name }}">
                                {% endif %}
                                <i class="weui-icon-checked"></i>
                            </div>
                            <div class="weui-cell__bd">
                                <span>{{ s.name }} {{ order.suffix_name }}</span>
                            </div>
                        </label>
                    {% endfor %}
                    <div class="weui-flex" style="bottom:10px;width:100%">
                         {% if not forloop.first %}
                            <div class="weui-flex__item" style="text-align: center"><a href="javascript:void(0);" class="weui-btn weui-btn_mini weui-btn_primary" style="margin-top: 0px;" id="prev_{{ order.sort }}">上一页</a></div>
                         {% endif %}

                        {% if not forloop.last %}
                            <div class="weui-flex__item" style="text-align: center"><a href="javascript:void(0);" class="weui-btn weui-btn_mini weui-btn_primary" id="next_{{ order.sort }}">下一页</a></div>
                         {% endif %}
                         {% if forloop.last %}
                            <div class="weui-flex__item" style="text-align: center"><a href="javascript:void(0);" class="weui-btn weui-btn_mini weui-btn_primary" id="submit_form">提交</a></div>
                         {% endif %}

                    </div>
                </div>
            </div>
        {% endfor %}
        </form>
    </div>
</div>
    <script>
        $(function() {
            $("input[name^='radio_']").on("click", function () {
                var len = {{ orders|length }} ;
                var idx = $(this).attr("data-item");
                idx = idx.split('_')[1];
                var idx2 = idx * 1 + 1;
                setTimeout(function () {
                    if (idx == len) {
                        return false;
                    } else {
{#                        $("#sort_" + idx + "").hide();#}
{#                        $("#sort_" + idx2 + "").show();#}
                    }
                }, 500)
            });

            $("#submit_form").on("click",function(){
                $("#form1").action = "{% url 'dog-order' %}";
                $("#form1").submit();
            });

            $("a[id^='next_']").on("click", function(){
                var page_id = $(this).attr("id");
                var id = page_id.split('_')[1];
                var next_id = parseInt(id) + 1;

                $("#sort_" + id).addClass('hide');
                $("#sort_" + next_id).removeClass('hide');

            });

            $("a[id^='prev_']").on("click", function () {
                var page_id = $(this).attr("id");
                var id = page_id.split('_')[1];
                var prev_id = parseInt(id) - 1;

                $("#sort_" + id).addClass('hide');
                $("#sort_" + prev_id).removeClass('hide');

            });

        });

    </script>


{% endblock container %}
